<template>
  <div class="box_trends">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
        <!-- 此处搭配transition有疑问 没生效 -->
        <!-- <transition name="fade"> -->
        <component :is="item.comName" />
        <!-- </transition> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, markRaw, shallowRef } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

// reactive 会进行proxy代理 而我们组件代理之后毫无用处 为了节省性能开销 推荐我们使用shallowRef或者markRaw跳过proxy代理
const tabs = reactive([
    { label: '组件A', name: 'A', comName: markRaw(A) },
    { label: '组件B', name: 'B', comName: markRaw(B) },
    { label: '组件C', name: 'C', comName: markRaw(C) }
])
const activeName = ref('A')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.props.name, event)
}
</script>

<style lang="less" scoped>
.box_trends {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 3s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>
